<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import { useAccount } from "@/stores/account";
import Pop from "@/components/pop/index.vue";
import { Notify } from "@/components/y-notify/script";
import i18n from "@/locals";
import { useUser } from "@/stores/user";
import { reload } from "@/comm/tools";


// import link from './imgs/share_ Link.png';
// import telegraph from './imgs/share_ telegraph.png';
// import facebook from './imgs/share_facebook.png';
// import phone from './imgs/share_phone.png';
import Carousel from "@/assets/share_t1.png";
import Carousel2 from "@/assets/share_t2.png";
// import Carousel3 from "@/assets/share_bg3.png";

import download from "./imgs/download.png";
import facebook from "./imgs/facebook.png";
import twitter from "./imgs/twitter.png";
import telegram from "./imgs/telegram.png";
import whatsapp from "./imgs/whatsapp.png";
import reddit from "./imgs/reddit.png";
import link from "./imgs/link.png";
import { copyTextToClipboard } from "@/comm/copy";
import { toast } from "@/components/toast/toast";
import { domToImage } from "@/comm/tooler";
import { get } from "@/comm/request";
import { URL_USER_INFO } from "@/comm/api";

// import ShareNetwork from "@/components/ShareNetwork/index.vue"
const user = useUser();
const QRcodeUrl = ref('')
enum KeyType {
    /**链接 */
    link,
    /** */
    telegraph,
    /**脸书 */
    facebook,
    /**手机 */
    phone
}
interface IconType {
    icon: string;
    name: string;
}
const icons: IconType[] = [
    // { icon: link, name: "link" },
    // { icon: facebook, name: "facebook" },
    { icon: telegram, name: "telegram" },
    // { icon: reddit, name: "reddit" },
    // { icon: whatsapp, name: "whatsapp" },
    { icon: twitter, name: "twitter" }
    // { icon: download, name: "download" },
];



let ShareDate = {
    url: "",
    title: i18n.global.t("message.Global.shares.ts"),
    hashtags: "ChainingView",
    description: "",
    quote: ""
};

// 获取验证码
async function getCode() {
    const res: any = await get(URL_USER_INFO);
}
const onDown = function (type: KeyType) {
    // console.log("yzt", type);
};

interface Carousel {
    url: string;
    title: string;
    sub: string;
}
const QRCode = (window as any)["QRCode"]

const idx = ref(0);
const carousel: Carousel[] = [
    { url: Carousel, title: i18n.global.t("message.active.wt"), sub: i18n.global.t("message.active.jt") },
    { url: Carousel2, title: i18n.global.t("message.active.wt"), sub: i18n.global.t("message.active.jt") },
    // { url: Carousel3, title: "想拥有更多的能量吗？", sub: "立即邀请好友一起加入吧！" }
];
watch(
    () => idx.value,
    (count, prevCount) => {
        const sum = carousel.length - 1;
        // console.log('yzt', count, prevCount);
        if (count > sum) {
            idx.value = 0;
        }
        if (count < 0) {
            idx.value = sum;
        }
    }
);


async function initUserInfo() {
    // const res: any = await get(URL_USER_INFO);
    // console.log('重新获取用户信息！！！！！！！！！！！！！！！！！！', res.data)
    ShareDate = {
        url: location.href + `/recommend/${user.info?.recommendCode}`,
        title: i18n.global.t("message.Global.shares.ts"),
        hashtags: "ChainingView",
        description: "",
        quote: ""
    };
}
// 生成二维码
function createQrcode() {
    // var qrCode =  QRCode.create("qrcode", {
    //     text: window.location.href, // 二维码的内容
    //     width: 50, // 二维码的宽度
    //     height: 50 // 二维码的高度
    // });
    // console.log('刷新用户二维码！！！', user?.info)
    if (user?.info?.recommendCode) {
        QRCode.toDataURL(`${window.location.origin}/recommend/${user.info?.recommendCode}`)
            .then((url: any) => {
                console.log(url, "uuuu")
                QRcodeUrl.value = url
            })
            .catch((err: any) => {
                console.error(err)
            })
    } else {
        QRCode.toDataURL(window.location.origin)
            .then((url: any) => {
                console.log(url, "uuuu")
                QRcodeUrl.value = url
            })
            .catch((err: any) => {
                console.error(err)
            })
    }
    // 在指定的容器中生成二维码
    // qrCode.makeCode();
    ShareDate = {
        url: location.origin + `/recommend/${user.info?.recommendCode}`,
        title: i18n.global.t("message.Global.shares.ts"),
        hashtags: "ChainingView",
        description: "",
        quote: ""
    };
    console.log(user.info?.recommendCode)
}
const account = useAccount();
const onClose = function () {
    account.changePopShare(false);
};
watch(() => account?.popShare, (val, oldVal) => {
    if (val) {
        createQrcode()
        initUserInfo()
    }

})
const onCopy = function () {
    copyTextToClipboard(window.location.origin + `/recommend/${user.info?.recommendCode}`);
    Notify.alert(i18n.global.t('message.Global.copy'));
    // toast("内容已經複製");
};

const items = ref<any>();

const onDownload = function () {
    console.log(carousel[idx.value]);
    // let img = new Image();
    // img.onload = ()=>{
    //     console.log(img.width, img.height)
    // }
    // img.src = carousel[idx.value].url;

    let dom = items.value.querySelector(".inner_box");
    console.log(items.value, dom);

    domToImage(dom);
};
</script>

<template>
    <Pop :show="account.popShare" :is-title="false" :is-close="false" :padding-type="''">
        <div class="shore" ref="items">
            <!-- <img class="closebtn" src="./imgs/close.png" @click="onClose"> -->
            <span class="closebtn iconfont icon-31guanbi" @click="onClose"></span>
            <div class="shbox">
                <div class="updownBtn d-flex justify-space-between px-3">
                    <VIcon @click="idx -= 1">mdi mdi-chevron-left</VIcon>
                    <VIcon @click="idx += 1">mdi mdi-chevron-right</VIcon>
                </div>
                <div class="inner_box">
                    <div class="shore_tips">
                        <img class="logo" src="@/assets/share_tlogo.png" />
                        <!-- <div class="ewm"></div> -->
                    </div>
                    <v-carousel style="height: auto" v-model="idx" hide-delimiters>
                        <template v-slot:prev="{ props }"></template>
                        <template v-slot:next="{ props }"></template>
                        <v-carousel-item class="d-flex flex-column" v-for="item in carousel">

                            <img class="poster" :src="item.url" />
                            <div class="subTitle">
                                <p style=" font-weight: bold">{{ item.title }}</p>
                                <p>{{ item.sub }}</p>
                                <!-- <h1 font-size: 3vmin; style="font-size: 30px;">{{ item.title }}</h1> -->
                                <!-- <p style="font-size: 1.8vmin" style="font-size: 20px;">{{ item.sub }}</p> -->
                            </div>
                            <div class="bottom_text">
                                <span @click="createQrcode()">{{ $t("message.active.tt") }}</span>
                                <img :src="QRcodeUrl" alt="">
                            </div>
                        </v-carousel-item>
                    </v-carousel>
                </div>


            </div>
            <div class="bottom d-flex justify-space-evenly">
                <!-- <img v-for="url in icons" :src="url.icon" @click="() => onDown(url.name)"> -->
                <img class="i-img" :src="link" @click="onCopy" />
                <ShareNetwork v-for="item in icons" :network="item.name" :url="ShareDate.url" :title="ShareDate.title"
                    @open="reload" :description="ShareDate.description" :quote="ShareDate.quote"
                    :hashtags="ShareDate.hashtags">
                    <img class="i-img" :src="item.icon" />
                </ShareNetwork>
                <img class="i-img" :src="download" @click="onDownload" />
            </div>
        </div>
    </Pop>
</template>

<style lang="less">
.mask-box {
    border: none !important;
    // overflow: hidden;
}

.shore {
    background: #16161B;
    border-radius: 10px 10px 0 0;

    .inner_box {
        padding: 40px 0 14px;
        background: #1C1F25;
        border-radius: 8px;
        width: 464px;
    }

    .shore_tips {
        z-index: 3;
        width: 100%;
        height: 100%;
        // position: absolute;
        // top: 0;
        // left: 0;
        @wh: 5%;
        text-align: center;

        .ewm {
            position: absolute;
            top: @wh;
        }

        .logo {
            width: 138px;
            height: 20px;
            left: 0;
            right: 0;
            margin: 0 auto;
            margin-bottom: 40px;
        }

        .ewm {
            width: 100px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0.1);
            // background: -webkit-linear-gradient(top, transparent 40px, yellow 45px),-webkit-linear-gradient(left, transparent 40px, yellow 41px);
            // background:-webkit-linear-gradient(top, transparent 1.08vw, var(--main) 2.344vw), -webkit-linear-gradient(left, transparent 0.08vw, var(--main) 2.135vw);
            // background-size: 41px 41px;
            right: @wh;
        }
    }

    .poster {
        width: 260px;
        // height: 469px;
        object-fit: cover;
        display: block;
        margin: 0 auto;
    }

    .v-window__controls {
        width: 100% !important;
    }

    .updownBtn {
        width: 100%;
        position: absolute;
        z-index: 9;
        left: 0;
        top: 35%;

        i {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--card);
        }
    }

    .leftBtn,
    .rightBtn {
        position: absolute;
    }

    .leftBtn {
        left: -1%;
    }

    .rightBtn {
        right: -10px;
    }

    .closebtn {
        // @wh: 1.5vw;
        // width: @wh;
        // height: @wh;
        // border: 1px solid white;
        // border-radius: 50%;
        // padding: 3px;
        position: absolute;
        // top: -@wh;
        // right: -@wh;
        right: 12px;
        top: 12px;
        color: #b1b6c6;
        font-size: 20px;

        &:hover {
            color: #fff;
        }
    }

    .subTitle {
        // background-color: var(--main);
        margin-top: 11px;
        color: #EAECEF;
        padding-bottom: 12px !important;
        padding-top: 10px;
        text-align: center;
        margin-bottom: 24px;

        >p:nth-child(1) {
            font-size: 30px;
            font-weight: 600;
            color: #EAECEF;
            line-height: 42px;
        }

        >p:nth-child(2) {
            font-size: 21px;
            font-weight: 400;
            color: #EAECEF;
            line-height: 29px;
            margin-top: 9px;
        }
    }

    .bottom_text {
        display: flex;
        justify-content: space-between;
        align-items: center;

        border-top: 1px solid #2C323D;
        padding: 14px 20px 0;

        >span:nth-child(1) {
            font-size: 14px;
            font-weight: 400;
            color: #EAECEF;
            line-height: 20px;
        }

        >img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
        }
    }

    .bottom {
        padding: 20px 0;
        width: 100%;
        // border-bottom-left-radius: 12px;
        // border-bottom-right-radius: 12px;
        // background-color: rgba(0, 0, 0, 0.5);
        background-color: #1e2328;


        .i-img {
            --wh: 54px;
            width: var(--wh);
            height: var(--wh);
            opacity: 0.84;

            &:hover {
                opacity: 1;
            }
        }
    }
}

.shbox {
    padding: 46px 78px 16px;
}

:deep(.v-carousel-item) {
    background: #131619;
}
</style>
